<template>
	<p class="unit">全国栋数(栋)</p>
    <div class="disaster-warehousing">   	
        <div class="disaster-warehousing-item">          
        </div>
        <div class="disaster-warehousing-item">
            <div class="disaster-warehousing-panel">
            	<span class="disaster-warehousing-title">新建工程</span>
              <span class="disaster-warehousing-num">{{newProjectTotalNum}}</span>
              <span class="disaster-warehousing-unit">栋</span>          
            </div>           
        </div>       
    </div>
</template>
<script setup>
import { getProcessSituation } from '@/api/buildHouse.js';
const emit = defineEmits(['getType']);
const newProjectTotalNum = ref("");
const getData = () => {
	getProcessSituation().then((res) => {
		//console.log(res.data)
    newProjectTotalNum.value = res.data.newProjectTotalNum;
  });
}

getData();

</script>
<style lang='scss' scoped>
.unit{
	height: 18px;
	font-size: 18px;
	font-family: Source Han Sans CN-Regular, Source Han Sans CN;
	font-weight: 400;
	color: #FFFFFF;
	position: absolute;
	top:15px;
	right: 10px;
}
.disaster-warehousing{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: 140px;
    margin: -40px auto 0;
    &-item{
        width: 165px;
        height: 95px;
        font-size: 14px;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
        color: #FFFFFF;
        cursor: pointer;
        &:nth-child(1){
          background-size: 100% 100%;
      		background-image: url(/src/assets/images/buildHouse/bg_jggc.png);
        }
        &:nth-child(2){
					width: 240px;
					height: 58px;
					background: linear-gradient(90deg, rgba(181,211,255,0) 0%, #92BEFF 100%);
					border-radius: 0 50px 50px 0;
        }
        span{
            display: block;
        }
    }
    &-panel{
        /*width: 105px;*/
        height: 95px;
        text-align: center;
        position: relative;
        .disaster-warehousing-title{
            display: block;
            width: 72px;
						height: 18px;
						font-size: 18px;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 18px;
						-webkit-text-stroke: 1px rgba(0,0,0,0);
						text-stroke: 1px rgba(0,0,0,0);
            position: absolute;
            top: 20px;
            left: 15px;
        }
        .disaster-warehousing-num{
        		display: block;
            position: absolute;           
						width: 80px;
						height: 35px;
						font-size: 36px;
						font-family: DS-Digital-Normal, DS-Digital;
						font-weight: 400;
						color: #46FFFF;
						line-height: 35px;
						-webkit-text-stroke: 1px rgba(0,0,0,0);
						text-stroke: 1px rgba(0,0,0,0);
						-webkit-background-clip: text;
						top: 10px;
            left: 100px;
        }
        .disaster-warehousing-unit{
            display: block;
						height: 18px;
						font-size: 18px;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 18px;
						-webkit-text-stroke: 1px rgba(0,0,0,0);
            position: absolute;
            top: 20px;
            right: 10px;
        }
        
    }
}
</style>